<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row">
      <t-state-machine
        label="下拉选择123"
        placeholder="提示语123"
        v-model="model"
        emit-value
        map-options
        clearable
        :use-input="true"
        input-debounce="0"
        itemsDataSourceType="static"
        displayField="Name1"
        valueField="Code1"
        :staticItems="[
          { label: '1', value: '1' },
          { label: '2', value: '2' },
          { label: '3', value: '3' },
        ]"
        :listDataSource="[
          { label: '1', value: '1', Name1: 'name4', Code1: '4' },
          { label: '2', value: '2', Name1: 'name5', Code1: '5' },
          { label: '3', value: '3', Name1: 'name6', Code1: '6' },
        ]"
        :options="[
          { label: '11', value: '11' },
          { label: '22', value: '22' },
          { label: '33', value: '33' },
        ]"
      >
        <template v-slot:no-option>
          <t-item>
            <t-item-section class="text-grey"> No results </t-item-section>
          </t-item>
        </template>
      </t-state-machine>

      <t-state-machine
        label="状态组件"
        v-model="model"
        :options="[
          { label: '11', value: '11' },
          { label: '22', value: '22' },
          { label: '33', value: '33' },
        ]"
        stateMachineId=""
        :stateMachineFunction="stateMachineFunction"
        :widgetObject="widgetObject"
      >
      </t-state-machine>
    </div>
  </div>
</template>

<script>
import { provide, ref } from 'vue';

export default {
  setup() {
    const context = (data)=>{return data}
    const parentMethod = async (script) => {
      // 模拟异步操作
      const response = await new Promise(resolve => {
        setTimeout(() => {
          resolve(['这是父组件方法的返回值:'+script,context(script)]);
        }, 1000);
      });
      return response;
    };

    provide('executeScript', parentMethod);
    function stateMachineFunction(a, b, c) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([
            {
              id: 1,
              name: 1,
            },
            { id: 2, name: 2 },
          ]);
        }, 2000);
      });
    }
    return {
      model: ref(null),
      stateMachineFunction,
      widgetObject: ref({}),
    };
  },
};
</script>
